import React, { Component, useEffect, useState } from 'react';

import { OrderDetailStyle } from '../style'
import { OrderGoodsItem } from '@common/goodsItem'
import DocumentTitle from 'react-document-title';
import request from '@service'
import { getTime, mixRoute } from '@/utils';


// import BetterScroll from 'common/betterScroll/BetterScroll'

const Timer = (props) => {
  const { deliver_time } = props
  const [timerObject, settimerObject] = useState({})

  useEffect(() => {
    const Timer = setInterval(() => {
      let timerObj = { day: 0, hour: 0 }
      let now = parseInt(deliver_time) - Date.parse(new Date()) / 1000
      if (now > 0) {
        timerObj.day = Math.floor(now / 3600 / 24);
        timerObj.hour = Math.floor((now - timerObj.day * 3600 * 24) / 3600);
      }
      settimerObject(timerObj)
    }, 1000)

    return () => {
      clearInterval(Timer)
    }

  }, [timerObject, deliver_time])

  return (
    <span>还剩{timerObject.day}天{timerObject.hour} 时自动确认收货</span>
  )
}

const Address = (props) => {

  const { address } = props

  return (
    <div className="orderDetailAddress common-cards">
      <div className="flex-column">
        <p className="addressTop">
          <img src='https://res.lexiangpingou.cn/images/vip/orderdw.png' alt="" />
          <span>收货地址</span>
        </p>
        <p className="addressName"> {address.cname} <span
          className="addressPhone">{address.phone}</span></p>
        <p className="addressInfo">{address.address}</p>
      </div>
    </div>
  )
}

const PriceDetail = (props) => {

  const { priceList } = props

  return (
    <div className="orderDetailAmount common-cards">
      {
        priceList.map((item, key) => {
          return (
            <div key={key + item.name} className='doog' >
              <p>{item.name}</p>
              <p style={item.name === '实付金额' ? { color: '#ff762e' } : {}} >
                {item.name === '支付保证金' ? '-' : ''}￥{item.price}</p>
            </div>
          )
        })
      }
    </div>
  )
}

const OrderStatus = (props) => {

  const { supply_status: status, refund, pso, sro, suro, deliver_time } = props

  console.log(deliver_time, status, pso, refund)

  return (
    <div className="detailGoodsStatus common-cards flex-column">

      {
        refund === '0'
        && <div className="">

          <p className="statusText">
            {status === "0" && '供应商待发货'}
            {/* {status === "5" && '已取消'} */}
            {status === "1" && '待收货'}
            {status === "2" && '待评价'}
          </p>

          <p className="statusAction">
            {status === "0" && '买家已付款等待供应商发货'}
            {status === "1" && <Timer deliver_time={deliver_time} />}
            {status === "2" && '已完成交易'}
          </p>

        </div>
      }

      {
        (refund !== '0' && pso === '0')
        && <div className="">
          <p className="statusText">
            {refund === "1" && '平台处理中'}
            {refund === "-1" && '拒绝退款'}

            {(refund === '2' && sro === '0') && '审核通过，处理款项中'}
            {(refund === '2' && sro !== '0') && ' 平台已打款 '}

          </p>

          <p className="statusAction">
            {refund === "1" && '请耐心等待'}
            {refund === "-1" && '交易结束'}

            {(refund === '2' && sro === '0') && '即将打款'}
            {(refund === '2' && sro !== '0') && ' 请注意查收 '}
          </p>

        </div>
      }

      {
        (refund !== '0' && pso !== '0')
        && <div className="">
          <p className="statusText">
            {refund === "1" && '平台处理中'}
            {refund === "-1" && '拒绝退款'}


            {(refund === '2' && sro === '0' && suro === null) && '等待供应商打款给平台'}
            {(refund === '2' && sro === '0' && suro === '0') && '供应商已退款给平台'}
            {(refund === '2' && sro === '0' && suro === '1') && '平台退款处理中'}
            {(refund === '2' && sro !== '0' && suro === '2') && '退款成功'}

          </p>

          <p className="statusAction">
            {refund === "1" && '请耐心等待'}
            {refund === "-1" && '交易结束'}

            {(refund === '2' && sro === '0' && suro === null) && '请等待'}
            {(refund === '2' && sro === '0' && suro === '0') && '处理中'}
            {(refund === '2' && sro === '0' && suro === '1') && '请等待'}
            {(refund === '2' && sro !== '0' && suro === '2') && '注意查收'}
          </p>

        </div>
      }


    </div>
  )
}

class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      goodsInfo: [],
      showService: false,
      time: '45787',
      orderDetail: {}
    }
  }


  componentDidMount() {
    let orderno = this.props.match.params.orderno
    let getOrderDetail = {
      data: {
        action: 'order_detail',
        id: orderno
      }
    }

    request(getOrderDetail).then(res => {

      if (res.status === 200) {
        this.setState({
          orderDetail: res.data
        })
      } else {
        console.log('数据请求失败')
      }

    })
  }


  render() {

    const { orderDetail } = this.state
    return (
      <>
        <DocumentTitle title={this.props.route.title} />
        <OrderDetailStyle>

          {orderDetail.priceList &&
            <div className="orderDetail">
              <OrderStatus {...orderDetail} />

              <div className="orderDetailGoods common-cards">
                <OrderGoodsItem goods={orderDetail.good} />
              </div>

              <Address address={orderDetail.address} />

              <PriceDetail priceList={orderDetail.priceList} />

              <div className="orderDetailOrderNumber common-cards">
                <div>
                  <p>订单编号 <span>{orderDetail.orderno}</span></p>
                  <p>创建时间 <span>{getTime(orderDetail.order_createtime)}</span></p>
                  <p>付款时间 <span>{getTime(orderDetail.balance_paytime)}</span></p>
                  {orderDetail.deliver_time !== '0' && <p>发货时间 <span>{getTime(orderDetail.deliver_time)}</span></p>}
                  {orderDetail.receive_time !== "0" && <p>成交时间 <span>{getTime(orderDetail.receive_time)}</span></p>}
                  <p>司机电话 <span>{orderDetail.driverPhone}</span></p>
                  <p>车牌号码<span>{orderDetail.carNumber}</span></p>
                </div>
              </div>
            </div>
          }

          <div className="order-detail-option flex-row">
            <button className="gopay" onClick={e => {
              mixRoute(this.props.history, '/')
              // isApplet ? window.navigateToWebWiew('/') : this.props.history.push('/') 
            }}> 返回首页 </button>
            <button className="gopay" onClick={e => {
              mixRoute(this.props.history, '', 'goBack')
              // isApplet ? window.navigateGoBack() : this.props.history.goBack()
            }}> 返回 </button>
          </div>

        </OrderDetailStyle>
      </>
    );
  }

  changeTime = _ => {
    let { countdown } = this.state
    countdown -= 1
    let h = parseInt(countdown / 3600)
    let m = parseInt(countdown / 60 % 60)
    let s = parseInt(countdown % 60)
    this.setState({
      time: `${h}:${m}:${s}`,
      countdown
    })
  }

  componentWillUnmount = () => {
    // clearInterval(this.timer)
  }

  goPay = order => {
    if (order.tuan_id === '0') {
      this.props.history.replace(`/pay/1/${order.orderno}/${order.id}`)
    } else {
      this.props.history.replace(`/pay/2/${order.orderno}/${order.id}`)
    }
  }

}

export default OrderDetail